<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
		<title>Advanced Reservation page</title>
		<link rel="stylesheet" href="styles/style.css" type="text/css" />
		<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
		<script src="scripts/jquery.select.js" type="text/javascript"></script>
		<script src="scripts/tools.js" type="text/javascript"></script>
		<script src="scripts/script.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<%@include file="header.jsp" %>
			</div>
			<div id="content">
				<div style="margin-left:50px;">Location：<a href="index.jsp">Home</a> &gt; DIY your cake</div>
				<div id="flash">
				<form name="upload_form" id="upload_form" action="UserServlet?action=diy" method="POST" enctype="multipart/form-data"  target="hidden_frame">
					<div id="warm_tip">
						06 inches: 02-03 people, for Valentine's Day, mother's day and other festive;<br />
						10 inches: 05-08 people, for birthday parties, festivals, to visit relatives and friends;<br />
						14 inches: 10-12 people, for company, reunion;<br />
						18 inches: 15-18 people, for all kinds of celebration activities;<br />
						20 inches: 18-20 people, for all kinds of celebration activities.<br />
						The picture is JPG format, resolution is 800 * 600<br />
						If not selected tool will default to the standard tools<br />
					</div>
					<div id="condition">
						<div>
							<span style="width:80px;">Suitable for:</span>
							<span id="use1" class="choice1" onclick="changeUse(1);">wedding festival</span>
							<span id="use2" class="choice1" onclick="changeUse(2);">birthday (senior)</span>
							<span id="use3" class="choice1" onclick="changeUse(3);">birthday (child)</span>
							<span id="use4" class="choice1" onclick="changeUse(4);">Valentine's Day</span>
							<span id="use5" class="choice1" onclick="changeUse(5);">Dinner party</span>
						</div>
						<div style="margin-top:5px;">
							<span style="width:80px;">Taste:</span>
							<span id="taste1" class="choice2" onclick="changeTaste(1);">cheese</span>
							<span id="taste2" class="choice2" onclick="changeTaste(2);">sponge</span>
							<span id="taste3" class="choice2" onclick="changeTaste(3);">vanilla cream</span>
							<span id="taste4" class="choice2" onclick="changeTaste(4);">chocolate</span>
							<span id="taste5" class="choice2" onclick="changeTaste(5);">schwarzwald</span>
							<span id="taste6" class="choice2" onclick="changeTaste(6);">swiss chocolate</span>
							<span id="taste7" class="choice2" onclick="changeTaste(7);">white chocolate</span>
						</div>
						<div style="margin-top:5px;">
							<span style="width:80px;">Size:</span>
							<span id="size1" class="choice3" onclick="changeSize(1);">6inch</span>
							<span id="size2" class="choice3" onclick="changeSize(2);">10inch</span>
							<span id="size3" class="choice3" onclick="changeSize(3);">14inch</span>
							<span id="size4" class="choice3" onclick="changeSize(4);">18inch</span>
							<span id="size5" class="choice3" onclick="changeSize(5);">20inch</span>
						</div>
						<div style="margin-top:5px;">
							<span style="width:80px;">Layer:</span>
							<span id="level1" class="choice4" onclick="changeLevel(1);">layer1</span>
							<span id="level2" class="choice4" onclick="changeLevel(2);">layer2</span>
							<span id="level3" class="choice4" onclick="changeLevel(3);">layer3</span>
							<input type="text" id="level" class="l_q"/></div>
						<div></div>
					</div>
					
					<div id="tools">
						<table>
							<tr>
								<td class="tool">
									<img src="images/diy/knife1.jpg" alt="knife1" />
									<div>knife1 $10
										<img src="images/minus.gif" class="q_btn" onclick="changeQ('knife1',false);" />
										<input type="text" id="knife1" class="t_q"/>
										<img src="images/add.gif" class="q_btn" onclick="changeQ('knife1',true);" />
									</div>
								</td>
								<td class="tool">
									<img src="images/diy/knife2.jpg" alt="knife2" />
									<div>knife2 $20
										<img src="images/minus.gif" class="q_btn" onclick="changeQ('knife2',false);" />
										<input type="text" id="knife2" class="t_q"/>
										<img src="images/add.gif" class="q_btn" onclick="changeQ('knife2',true);" />
									</div>
								</td>
								<td class="tool">
									<img src="images/diy/knife3.jpg" alt="knife3" />
									<div>knife3 $30
										<img src="images/minus.gif" class="q_btn" onclick="changeQ('knife3',false);" />
										<input type="text" id="knife3" class="t_q"/>
										<img src="images/add.gif" class="q_btn" onclick="changeQ('knife3',true);" />
									</div>
								</td>
							</tr>
							<tr>
								<td class="tool">
									<img src="images/diy/fork1.jpg" alt="fork1" />
									<div>fork1 $10
										<img src="images/minus.gif" class="q_btn" onclick="changeQ('fork1',false);" />
										<input type="text" id="fork1" class="t_q"/>
										<img src="images/add.gif" class="q_btn" onclick="changeQ('fork1',true);" />
									</div>
								</td>
								<td class="tool">
									<img src="images/diy/fork2.jpg" alt="fork2" />
									<div>fork2 $15
										<img src="images/minus.gif" class="q_btn" onclick="changeQ('fork2',false);" />
										<input type="text" id="fork2" class="t_q"/>
										<img src="images/add.gif" class="q_btn" onclick="changeQ('fork2',true);" />
									</div>
								</td>
								<td class="tool">
									<img src="images/diy/fork3.jpg" alt="fork3" />
									<div>fork3 $15
										<img src="images/minus.gif" class="q_btn" onclick="changeQ('fork3',false);" />
										<input type="text" id="fork3" class="t_q"/>
										<img src="images/add.gif" class="q_btn" onclick="changeQ('fork3',true);" />
									</div>
								</td>
							</tr>
							<tr>
								<td class="tool">
									<img src="images/diy/dish1.jpg" alt="dish1" />
									<div>dish1 $10
										<img src="images/minus.gif" class="q_btn" onclick="changeQ('dish1',false);" />
										<input type="text" id="dish1" class="t_q"/>
										<img src="images/add.gif" class="q_btn" onclick="changeQ('dish1',true);" />
									</div>
								</td>
								<td class="tool">
									<img src="images/diy/dish2.jpg" alt="dish2" />
									<div>dish2 $20
										<img src="images/minus.gif" class="q_btn" onclick="changeQ('dish2',false);" />
										<input type="text" id="dish2" class="t_q"/>
										<img src="images/add.gif" class="q_btn" onclick="changeQ('dish2',true);" />
									</div>
								</td>
								<td class="tool">
									<img src="images/diy/dish3.jpg" alt="dish3" />
									<div>dish3 $20
										<img src="images/minus.gif" class="q_btn" onclick="changeQ('dish3',false);" />
										<input type="text" id="dish3" class="t_q"/>
										<img src="images/add.gif" class="q_btn" onclick="changeQ('dish3',true);" />
									</div>
								</td>
							</tr>
						</table>
					</div>
					<div id="require">
						
							<table>
								<tr>
									<td width="70">phone:</td>
									<td width="300"><input type="text" id="phone" style="width:300px;"/>*</td>
									<td width="70">address:</td>
									<td width="300"><input type="text" id="address" style="width:300px;"/>*</td>
								</tr>
								<tr>
									<td>quantity:</td>
									<td><input type="text" id="quantity" style="width:300px;" value="1"/>*</td>
									<td>remark:</td>
									<td><input type="text" id="remark" style="width:300px;"/></td>
								</tr>
								<tr>
									<td>upload picture:</td>
									<td colspan="3">
										<input type="file" name="pic_path" id="pic_path"/> 
										<iframe name='hidden_frame' id="hidden_frame" style="display:none"></iframe>
										<!-- 
										<input name="pic_path" id="pic_path" readonly />
										<input type="button" value="Browse" onclick="$('#path').click();" /> 
										 -->
									</td>
								</tr>
								<tr>
									<td></td>
									<td colspan="3">
										<span style="float:right;">some description of the picture,give your description&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									</td>
								</tr>
								<tr>
									<td>description:</td>
									<td colspan="3"><textarea id="r_description"></textarea></td>
								</tr>
							</table>
						
					</div>
					<div id="confirm_diy">
						<%
		    				if(username==null || username.equals(""))
		    				{
						%>
							<input type="button" value="" class="submit" onclick="toURL('login.jsp');" />
						<%
		    				}
		    				else
		    				{
						%>
							<input type="button" value="" class="submit" onclick="diy();" />
						<%
		    				}
						%>
						<input type="button" value="" class="reset" onclick="reset();"/>
					</div>
					</form>	
				</div>
				<div id="categorys">
					<%@include file="footer.jsp" %>
				</div>
			</div>
		</div>
	</body>
</html>
	